<template>
    <div id="Add">
         <button id="add" @click="add()">新增</button>
           <form >
            <label>姓名</label>
            <input type="text" v-model="name">
            <label>班级</label>
            <select v-model="class_id">
                <option>1班</option>
               <option>2班</option>
               <option>3班</option>
               <option>4班</option>
                <!-- <option v-for="item in select_list" :key="item.id">{{item.name}}</option> -->
            </select>
            <button type="button" @click="submit()">提交</button>
          
          </form>
    </div>  
</template>
<script>

export default {
    name:'Add',
    props:{
        name:{
            type:String,
            required:true
        },
        class_id:{
            required:true 
        }
    },
    components:{
      
    },
    data(){
        return {
            // 给传的变量一个初始值
            id:'',
            // name:'',
            // class_id:''
           
        }
    },
    methods:{
        add(){
            //给父组件传值,第一个是方法,第二个是传的输入框input的值
            this.$emit('add',this.name,this.class_id,this.id=Date.now())
            this.name='';
            this.class_id='';
        },
        submit(){
            this.$emit('submit',this.name,this.class_id);
             this.name='';
            this.class_id='';
        }
    },
    
}
</script>
<style >
#add{
    width: 40px;
    height: 25px;
    background-color: rgb(85, 207, 238);
    border: none;
}
</style>